<!-- 字典详情 -->
<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { IDbFormItem } from '@/types/global'
import DuiForm from '@/common-ui/dui-form/index.vue'

defineProps({
  title: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

// 是否显示弹窗
const showDialog = ref(false)
const ruleFormRef = ref<InstanceType<typeof DuiForm>>()
// 表单配置
const formConfig = computed<IDbFormItem[]>(() => {
  return [{ label: '字典名称', prop: 'name', type: 'input', required: true }]
})
// 表单数据
const defaultData = {
  name: ''
}
const formData = ref(JSON.parse(JSON.stringify(defaultData)))

/**
 * 初始化弹窗
 */
function init(data?: any) {
  // infoId.value = data?.id ?? ''
  const resData: any = data || {}
  const defaultForm = JSON.parse(JSON.stringify(defaultData as any))
  Object.keys(defaultForm).forEach((key) => {
    ;(formData.value as any)[key] = resData[key] ?? defaultForm[key]
  })
  showDialog.value = true
}
/**
 * 点击提交
 */
function submitClick() {
  ruleFormRef.value
    ?.validate()
    .then(() => {})
    .catch(() => {})
}

defineExpose({
  init
})
</script>

<template>
  <dui-dialog v-model="showDialog" :title="title">
    <dui-form ref="ruleFormRef" :form-config="formConfig" :form-data="formData" :disabled="disabled" />
    <template #footer>
      <el-button @click="showDialog = false">关闭</el-button>
      <el-button type="primary" @click="submitClick" v-if="!disabled"> 确定 </el-button>
    </template>
  </dui-dialog>
</template>
